<template>
	<view class="container">
		<!-- 顶部状态栏 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="back-btn" @tap="goBack">
				<text class="back-icon">←</text>
			</view>
			<view class="nav-title">游戏中心</view>
			<view class="action-btn" @tap="showMenu">
				<text class="action-icon">⋮</text>
			</view>
		</view>
		
		<!-- 搜索框 -->
		<view class="search-bar">
			<view class="search-input-wrapper">
				<text class="search-icon">🔍</text>
				<input 
					type="text" 
					class="search-input" 
					placeholder="搜索游戏" 
					v-model="searchKeyword"
					@confirm="searchGames"
				/>
				<text class="clear-icon" v-if="searchKeyword" @tap="clearSearch">✕</text>
			</view>
		</view>
		
		<!-- 轮播广告 -->
		<swiper 
			class="banner-swiper" 
			circular 
			autoplay 
			interval="3000" 
			duration="500"
			indicator-dots
			indicator-color="rgba(255, 255, 255, 0.6)"
			indicator-active-color="#1a73e8"
		>
			<swiper-item v-for="(banner, index) in banners" :key="index" @tap="goToGameDetail(banner.gameId)">
				<image :src="banner.image" mode="aspectFill" class="banner-image"></image>
				<view class="banner-info">
					<text class="banner-title">{{ banner.title }}</text>
					<text class="banner-desc">{{ banner.desc }}</text>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 分类选项卡 -->
		<scroll-view scroll-x class="tabs-scroll" show-scrollbar="false">
			<view class="tabs">
				<view 
					v-for="(tab, index) in tabs" 
					:key="index" 
					class="tab-item" 
					:class="{ active: currentTab === index }"
					@tap="switchTab(index)"
				>
					<text>{{ tab }}</text>
				</view>
			</view>
		</scroll-view>
		
		<!-- 热门游戏 -->
		<view class="game-section" v-if="currentTab === 0">
			<view class="section-header">
				<text class="section-title">热门游戏</text>
				<text class="more-text" @tap="viewMore('hot')">查看更多 ></text>
			</view>
			
			<view class="game-grid">
				<view 
					v-for="(game, index) in hotGames" 
					:key="index" 
					class="game-card" 
					@tap="goToGame(game.path)"
				>
					<image :src="game.icon" mode="aspectFill" class="game-icon"></image>
					<text class="game-name">{{ game.name }}</text>
					<view class="game-tag" v-if="game.tag">{{ game.tag }}</view>
					<text class="game-players">{{ game.players }}</text>
				</view>
			</view>
		</view>
		
		<!-- 休闲游戏 -->
		<view class="game-section" v-if="currentTab === 1">
			<view class="section-header">
				<text class="section-title">休闲游戏</text>
				<text class="more-text" @tap="viewMore('casual')">查看更多 ></text>
			</view>
			
			<view class="game-list">
				<view 
					v-for="(game, index) in casualGames" 
					:key="index" 
					class="game-list-item" 
					@tap="goToGame(game.path)"
				>
					<image :src="game.icon" mode="aspectFill" class="game-list-icon"></image>
					<view class="game-list-info">
						<text class="game-list-name">{{ game.name }}</text>
						<text class="game-list-desc">{{ game.description }}</text>
						<view class="game-list-meta">
							<text class="game-list-category">{{ game.category }}</text>
							<text class="game-list-players">{{ game.players }}</text>
						</view>
					</view>
					<button class="play-btn">玩</button>
				</view>
			</view>
		</view>
		
		<!-- 新游戏 -->
		<view class="game-section" v-if="currentTab === 2">
			<view class="section-header">
				<text class="section-title">新游戏</text>
				<text class="more-text" @tap="viewMore('new')">查看更多 ></text>
			</view>
			
			<scroll-view scroll-x class="new-games-scroll" show-scrollbar="false">
				<view class="new-games-wrapper">
					<view 
						v-for="(game, index) in newGames" 
						:key="index" 
						class="new-game-card" 
						@tap="goToGame(game.path)"
					>
						<image :src="game.cover" mode="aspectFill" class="new-game-cover"></image>
						<view class="new-game-info">
							<text class="new-game-name">{{ game.name }}</text>
							<text class="new-game-desc">{{ game.description }}</text>
							<view class="new-badge">NEW</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 我的收藏 -->
		<view class="game-section" v-if="currentTab === 3">
			<view class="section-header">
				<text class="section-title">我的收藏</text>
				<text class="more-text" @tap="manageCollection">管理</text>
			</view>
			
			<view class="empty-collection" v-if="favoriteGames.length === 0">
				<image src="/static/images/game/empty-collection.png" mode="aspectFit" class="empty-image"></image>
				<text class="empty-text">暂无收藏游戏</text>
				<button class="browse-btn" @tap="switchTab(0)">去浏览游戏</button>
			</view>
			
			<view class="game-list" v-else>
				<view 
					v-for="(game, index) in favoriteGames" 
					:key="index" 
					class="game-list-item" 
					@tap="goToGame(game.path)"
				>
					<image :src="game.icon" mode="aspectFill" class="game-list-icon"></image>
					<view class="game-list-info">
						<text class="game-list-name">{{ game.name }}</text>
						<text class="game-list-desc">{{ game.description }}</text>
						<view class="game-list-meta">
							<text class="game-list-category">{{ game.category }}</text>
							<text class="game-list-players">{{ game.players }}</text>
						</view>
					</view>
					<button class="play-btn">玩</button>
				</view>
			</view>
		</view>
		
		<!-- 底部加载 -->
		<view class="loading" v-if="isLoading">
			<view class="loading-spinner"></view>
			<text class="loading-text">加载中...</text>
		</view>
		
		<!-- 底部提示 -->
		<view class="bottom-tips" v-if="!isLoading">
			<text>- 已经到底了 -</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				searchKeyword: '',
				isLoading: false,
				currentTab: 0,
				tabs: ['热门', '休闲', '新游', '收藏'],
				banners: [
					{
						gameId: 101,
						title: '记忆翻牌大赛',
						desc: '测试记忆力，赢取大奖',
						image: '/static/images/game/banner1.jpg'
					},
					{
						gameId: 102,
						title: '饼干点击者',
						desc: '轻松休闲，欢乐无限',
						image: '/static/images/game/banner2.jpg'
					},
					{
						gameId: 103,
						title: '元素守护者',
						desc: '策略塔防，即将上线',
						image: '/static/images/game/banner3.jpg'
					}
				],
				hotGames: [
					{
						id: 106,
						name: '帝国征服',
						icon: '/static/images/game/empire.jpg',
						tag: 'NEW',
						players: '12.3万人在玩',
						path: '/pages/empire/index'
					},
					{
						id: 101,
						name: '记忆翻牌',
						icon: '/static/images/game/memory.jpg',
						tag: 'HOT',
						players: '10.2万人在玩',
						path: '/pages/game/index'
					},
					{
						id: 102,
						name: '饼干点击者',
						icon: '/static/images/game/cookie.jpg',
						tag: '推荐',
						players: '8.7万人在玩',
						path: '/pages/cookie-clicker/index'
					},
					{
						id: 103,
						name: '冒险世界',
						icon: '/static/images/game/tower.jpg',
						tag: 'NEW',
						players: '7.8万人在玩',
						path: '/pages/game/index'
					},
					{
						id: 104,
						name: '农场经营',
						icon: '/static/images/game/farm.jpg',
						players: '6.5万人在玩',
						path: '/pages/farm/index'
					},
					{
						id: 105,
						name: '宠物小屋',
						icon: '/static/images/game/pet.jpg',
						players: '5.3万人在玩',
						path: '/pages/pet/index'
					}
				],
				casualGames: [
					{
						id: 204,
						name: '帝国征服',
						icon: '/static/images/game/empire.jpg',
						description: '建立你的帝国，征服世界！',
						category: '策略',
						players: '12.3万人在玩',
						path: '/pages/empire/index'
					},
					{
						id: 201,
						name: '开心消消乐',
						icon: '/static/images/game/puzzle.jpg',
						description: '三消类游戏，简单易上手',
						category: '休闲',
						players: '9.5万人在玩',
						path: '/pages/game/index'
					},
					{
						id: 202,
						name: '饼干点击者',
						icon: '/static/images/game/cookie.jpg',
						description: '欢乐挂机游戏，轻松获得成就感',
						category: '休闲',
						players: '8.7万人在玩',
						path: '/pages/cookie-clicker/index'
					},
					{
						id: 203,
						name: '经典接水果',
						icon: '/static/images/game/fruit.jpg',
						description: '休闲小游戏，考验反应速度',
						category: '街机',
						players: '4.8万人在玩',
						path: '/pages/game/index'
					}
				],
				newGames: [
					{
						id: 304,
						name: '帝国征服',
						cover: '/static/images/game/empire.jpg',
						description: '建立你的帝国，征服世界！策略性十足的帝国经营游戏',
						releaseDate: '2025-05-15',
						path: '/pages/empire/index'
					},
					{
						id: 301,
						name: '元素守护者',
						cover: '/static/images/game/tower.jpg',
						description: '全新策略塔防游戏，多元素搭配',
						releaseDate: '2025-05-10',
						path: '/pages/game/index'
					},
					{
						id: 302,
						name: '像素冒险家',
						cover: '/static/images/game/pixel.jpg',
						description: '复古像素风格，探索未知世界',
						releaseDate: '2025-05-08',
						path: '/pages/game/index'
					},
					{
						id: 303,
						name: '宇宙探索',
						cover: '/static/images/game/space.jpg',
						description: '太空探索游戏，发现奇妙星球',
						releaseDate: '2025-05-05',
						path: '/pages/game/index'
					}
				],
				favoriteGames: []
			};
		},
		onLoad() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.loadFavoriteGames();
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 显示菜单
			showMenu() {
				uni.showActionSheet({
					itemList: ['我的游戏', '游戏排行', '反馈问题'],
					success: (res) => {
						// 处理菜单选择
						uni.showToast({
							title: '功能开发中',
							icon: 'none'
						});
					}
				});
			},
			
			// 切换选项卡
			switchTab(index) {
				this.currentTab = index;
			},
			
			// 跳转到游戏
			goToGame(path) {
				uni.navigateTo({
					url: path,
					fail: () => {
						uni.showToast({
							title: '该游戏正在开发中',
							icon: 'none'
						});
					}
				});
			},
			
			// 跳转到游戏详情
			goToGameDetail(gameId) {
				uni.showToast({
					title: '游戏详情页面开发中',
					icon: 'none'
				});
			},
			
			// 查看更多游戏
			viewMore(category) {
				uni.showToast({
					title: '更多游戏页面开发中',
					icon: 'none'
				});
			},
			
			// 搜索游戏
			searchGames() {
				if (!this.searchKeyword.trim()) return;
				
				uni.showToast({
					title: '搜索功能开发中',
					icon: 'none'
				});
			},
			
			// 清空搜索
			clearSearch() {
				this.searchKeyword = '';
			},
			
			// 加载收藏游戏
			loadFavoriteGames() {
				// 模拟从本地存储加载收藏游戏
				// 实际应用中应该从用户数据或本地存储加载
				// 这里先使用空数组模拟无收藏状态
			},
			
			// 管理收藏
			manageCollection() {
				uni.showToast({
					title: '收藏管理功能开发中',
					icon: 'none'
				});
			}
		}
	};
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 40rpx;
}

/* 导航栏 */
.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #1a73e8;
	height: 88rpx;
	padding: 0 30rpx;
}

.back-btn, .action-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.back-icon, .action-icon {
	font-size: 40rpx;
	color: #ffffff;
}

.nav-title {
	flex: 1;
	text-align: center;
	font-size: 34rpx;
	font-weight: 600;
	color: #ffffff;
}

/* 搜索框 */
.search-bar {
	padding: 20rpx 30rpx;
	background-color: #ffffff;
}

.search-input-wrapper {
	display: flex;
	align-items: center;
	background-color: #f0f0f0;
	border-radius: 40rpx;
	padding: 10rpx 20rpx;
}

.search-icon {
	font-size: 32rpx;
	margin-right: 10rpx;
	color: #999;
}

.search-input {
	flex: 1;
	height: 60rpx;
	font-size: 28rpx;
}

.clear-icon {
	font-size: 28rpx;
	color: #999;
	padding: 0 10rpx;
}

/* 轮播广告 */
.banner-swiper {
	height: 320rpx;
}

.banner-image {
	width: 100%;
	height: 100%;
}

.banner-info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30rpx;
	background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

.banner-title {
	font-size: 34rpx;
	color: #ffffff;
	font-weight: 600;
	display: block;
	margin-bottom: 10rpx;
}

.banner-desc {
	font-size: 26rpx;
	color: rgba(255,255,255,0.9);
}

/* 选项卡 */
.tabs-scroll {
	white-space: nowrap;
	background-color: #ffffff;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.tabs {
	display: flex;
	height: 80rpx;
}

.tab-item {
	display: inline-block;
	padding: 0 40rpx;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 30rpx;
	color: #666;
	position: relative;
}

.tab-item.active {
	color: #1a73e8;
	font-weight: 500;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background-color: #1a73e8;
	border-radius: 2rpx;
}

/* 游戏区域 */
.game-section {
	background-color: #ffffff;
	margin-top: 20rpx;
	padding: 30rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.more-text {
	font-size: 26rpx;
	color: #1a73e8;
}

/* 热门游戏网格 */
.game-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
}

.game-card {
	position: relative;
	border-radius: 16rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.game-icon {
	width: 100%;
	height: 200rpx;
}

.game-name {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 15rpx;
	background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
	color: #ffffff;
	font-size: 28rpx;
	font-weight: 500;
}

.game-tag {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	background-color: #ff6b6b;
	color: #ffffff;
	font-size: 20rpx;
	padding: 6rpx 12rpx;
	border-radius: 10rpx;
}

.game-players {
	position: absolute;
	bottom: 50rpx;
	right: 20rpx;
	background-color: rgba(0,0,0,0.6);
	color: #ffffff;
	font-size: 20rpx;
	padding: 6rpx 12rpx;
	border-radius: 10rpx;
}

/* 休闲游戏列表 */
.game-list {
	
}

.game-list-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.game-list-item:last-child {
	border-bottom: none;
}

.game-list-icon {
	width: 120rpx;
	height: 120rpx;
	border-radius: 20rpx;
	margin-right: 20rpx;
}

.game-list-info {
	flex: 1;
}

.game-list-name {
	font-size: 30rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 10rpx;
}

.game-list-desc {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 15rpx;
}

.game-list-meta {
	display: flex;
	align-items: center;
}

.game-list-category {
	font-size: 22rpx;
	color: #666;
	background-color: #f5f5f5;
	padding: 4rpx 12rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
}

.game-list-players {
	font-size: 22rpx;
	color: #999;
}

.play-btn {
	width: 80rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	background-color: #1a73e8;
	color: #ffffff;
	font-size: 28rpx;
	margin: 0;
	padding: 0;
}

/* 新游戏滚动区域 */
.new-games-scroll {
	white-space: nowrap;
}

.new-games-wrapper {
	display: inline-flex;
	padding: 10rpx 0;
}

.new-game-card {
	width: 400rpx;
	margin-right: 30rpx;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
	position: relative;
}

.new-game-cover {
	width: 100%;
	height: 200rpx;
}

.new-game-info {
	padding: 20rpx;
}

.new-game-name {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 10rpx;
}

.new-game-desc {
	font-size: 24rpx;
	color: #999;
	white-space: normal;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.new-badge {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	background-color: #ff6b6b;
	color: #ffffff;
	font-size: 20rpx;
	font-weight: bold;
	padding: 6rpx 12rpx;
	border-radius: 10rpx;
}

/* 空收藏状态 */
.empty-collection {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 60rpx 0;
}

.empty-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
	opacity: 0.5;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
	margin-bottom: 30rpx;
}

.browse-btn {
	background-color: #1a73e8;
	color: #ffffff;
	font-size: 28rpx;
	padding: 15rpx 40rpx;
	border-radius: 40rpx;
}

/* 加载状态 */
.loading {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30rpx 0;
}

.loading-spinner {
	width: 40rpx;
	height: 40rpx;
	border: 6rpx solid #f3f3f3;
	border-top: 6rpx solid #1a73e8;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-right: 20rpx;
}

.loading-text {
	font-size: 28rpx;
	color: #999;
}

.bottom-tips {
	text-align: center;
	padding: 30rpx 0;
	font-size: 24rpx;
	color: #999;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
</style> 